var left = 0;
var timer;
var imagelist = document.getElementById("imagelist");
run();
function run() {
    if (left <= -3600) {
        left = 0;
    }
    imagelist.style.marginLeft = left + 'px';
    var n = (left % 1200 == 0) ? n = 1200 : n = 10;
    left -= 10;
    timer = setTimeout(run,n);
}

var al = document.getElementById("al");
var ar = document.getElementById("ar");

function imgchange(n) {
    let lt = - (n * 1200);
    imagelist.style.marginLeft = lt + "px";
    left = lt;
}

al.onclick = function() {
    let prevgo = Math.floor(-left / 1200) - 1;
    if (prevgo == -1) {
        prevgo = 2;
    }
    imgchange(prevgo);
} 

ar.onclick = function() {
    let nextgo = Math.floor(-left / 1200) + 1;
    if (nextgo == 4) {
        nextgo = 0;
    }
    imgchange(nextgo);
} 